<%--
  Created by IntelliJ IDEA.
  User: zhaohu
  Date: 2020/4/14
  Time: 10:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>ajaxquery</title>
    <script type="text/javascript" src="static/jquery-1.12.4/jquery-1.12.4.js"></script>
    <%--    引入bootstrap的资源文件--%>
    <script type="text/javascript" src="static/bootstrap-3.3.6-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="static/bootstrap-3.3.6-dist/css/bootstrap.css">

    <!--  时间-->

    <script language="javascript" type="text/javascript" src="static/My97DatePicker/WdatePicker.js"></script>
    <!-- 分页  -->

    <link rel="stylesheet" type="text/css" href="static/paginationjs-master/dist/pagination.css">

    <script language="javascript" type="text/javascript" src="static/paginationjs-master/dist/pagination.min.js"></script>






    <script type="text/javascript">
        // ajax请求处理函数
        function doAjaxQuery(){
            console.log("正准备执行ajax请求");

            console.log($("#formque").serialize());

            // 获取form表单中的输入框控件的值
            // jquery进行ajax的get请求
            $.ajax({
                type: "post", // 指明request请求类型为post请求
                url: "jqueryServlet", // 请求的url，form表单的action属性的值
                data:$("#formque").serialize(),// 客户端浏览器发送给服务器端的数据
                dataType: "json", // 指明服务器发回的响应内容的格式 Json
                success: function(data){ // ajax引擎执行成功之后的回调函数处理【符合条件：xmlhttp.readyState == 4 && xmlhttp.status == 200】
                    // 局部刷新浏览器：使用js操作页面标签对象进行显示【dom操作】
                    //document.getElementById("showMsg").innerHTML = data;
                    //$("#showMsg").html(data);
                    console.log("ajax查询结果：");
                    console.log(data);
                    if (data && data.length > 0) {

                        $("#mypag").pagination({
                            dataSource: data,// 查询的所有的数据都在data中，pagination插件对所有的数据集合进行分页处理
                            pageSize: 5,
                            showGoInput: true,
                            showGoButton: true,
                            callback : function(eachPageData, pagination) {
                                // 拼接要显示的内容的html
                                var showDom = "";
                                // for循环遍历list集合【json数组】
                                $.each(eachPageData,function(i,eachBean){

                                    // 取出json数组中的当前遍历的元素对象：json对象【实体类】
                                    showDom += "<tr>";

                                    showDom += "<th scope=\"row\">";
                                    showDom += (i + 1);
                                    showDom += "</th>";

                                    showDom += "<td>";
                                    showDom += eachBean.username;
                                    showDom += "</td>";

                                    showDom += "<td>";
                                    showDom += eachBean.userdizhi;
                                    showDom += "</td>";

                                    showDom += "<td>";
                                    showDom += eachBean.usercall;
                                    showDom += "</td>";

                                    showDom += "<td>";
                                    showDom += eachBean.userdate;
                                    showDom += "</td>";

                                    showDom += "</tr>";
                                });
                                // 将要显示的html内容，赋值给tbody标签
                                $("#showData").html(showDom);
                            }
                        })
                    }

                }
            })}
    </script>

</head>
<body style="width: 100%">
<div style="width: 90%;margin: 10px auto;padding-top: 20px">
    <form class="form-horizontal" id="formque">
        <div class="form-group">
            <div class="form-group">
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="username" name="username" placeholder="请输入姓名">
                </div>

                <label class="col-sm-2 control-label">地址</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="userDizhi" name="userDizhi" placeholder="请输入地址">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">联系电话</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="userCall" name="userCall" placeholder="请输入联系电话">
                </div>

                <label class="col-sm-2 control-label">注册日期</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="userDate" name="userDate" placeholder="请输入注册日期"
                           onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-default" onclick="doAjaxQuery()">查询</button>
                </div>
            </div>
        </div>
    </form>
    <div style="width: 90%;margin: 10px auto">
        <div>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>地址</th>
                    <th>联系电话</th>
                    <th>注册日期</th>
                </tr>
                </thead>

                <tbody>
                <c:forEach items="${sessionScope.listAll}" var="eachBean" varStatus="stat">
                    <tr>
                        <th scope="row">${stat.index+1}</th>
                        <td>${eachBean.username}</td>
                        <td>${eachBean.userDizhi}</td>
                        <td>${eachBean.userCall}</td>
                        <td> ${eachBean.userDate}</td>
                    </tr>
                </c:forEach>
                </tbody>
                <tbody id="showData">

                </tbody>
                <div id="mypag"></div>
            </table>
        </div>

    </div>


</div>
</form>


</body>
</html>
